<template>
    <div class="an-choice">
      <div class="close-ico" @click="OnChile">
        <x-icon type="ios-close-outline" size="30"></x-icon>
      </div>


      <div class="an-img-list">
        <div class="img">
          <img :src="url"/>
        </div>
        <div class="text">
          <div class="txt1">￥<span class="money">899</span></div>
          <div class="kucun">库存{{number}}件</div>
          <div class="peisong">配送至：武汉,  已选择：{{demo1Required}}</div>
        </div>
      </div>


      <div class="Choice">
        <div class="shop-color">
          <div class="til">颜色分类</div>
          <div class="list-box">
            <checker v-model="demo1Required" radio-required default-item-class="demo1-item" selected-item-class="demo1-item-selected">
              <checker-item :value="index" v-for="(item,index) in 8" :key="item.id">BM360</checker-item>
            </checker>
          </div>
        </div>
        <group>
          <x-number title="购买数量" v-model="shopingNumber" :min="1" :max="999" ></x-number>
        </group>

      </div>

      <div class="footer">
        <div class="pad">
          <flexbox :gutter="0" v-if="IsChoice">
            <flexbox-item>
              <x-button type="primary" class="btn-left" @click.native="OnClickShpo('1')">加入购物车</x-button>
            </flexbox-item>
            <flexbox-item>
              <x-button type="primary" class="btn-right" @click.native="OnClickShpo('2')">立即购买</x-button>
            </flexbox-item>
          </flexbox>
          <x-button v-else type="primary" class="btn-Sure" @click.native="OnClickShpo('3')">确定</x-button>
        </div>
      </div>



    </div>
</template>

<script>
  import { Checker, CheckerItem,XButton,Group,XNumber,Flexbox, FlexboxItem,    } from 'vux'
  import {PulsStoreShopCar} from '@/utils/auth'
    export default {
        name: "shop-choice",
      props:['defData'],
      components: {
        Checker,
        CheckerItem,
        XButton,
        Group,
        XNumber,
        Flexbox,
        FlexboxItem,
      },
      data(){
          return{
            url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2410630611,2662367772&fm=26&gp=0.jpg',
            number:8,
            shopingNumber:1,  //购买数量
            demo1Required:'',
            IsChoice:false,
          }
      },
      computed:{
          BtnId(){ //父组件 1加入购物车  2立即购买
            return this.defData.btnId
          }
      },
      watch:{
        BtnId(nd,od){
          this.anRead();
        }
      },
      mounted(){

      },
      methods:{
        anRead(){
          let n = this.defData.btnId;
          if(n=='0'){
            this.IsChoice = true;
          }else{
            this.IsChoice = false;
          }
          //console.log(n);
        },
        OnChile(){
          this.$emit('ClChoiceClic','0');
        },
        OnClickShpo(n){
          //1加入购物车  2立即购买  3确定
          let Num = this.shopingNumber;
          let od = {
            id:'1',
            shopId:'1',
            shopName:'叶麻店',
            til:'华硕(ASUS)PRIME B360M-D 大师系列 主板(Intel B360/LGA',
            money:899,
            address:'武汉',
            url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2410630611,2662367772&fm=26&gp=0.jpg',
            number:Num,
          };

          if(this.BtnId == '1'||n=='1'){
            PulsStoreShopCar(od,Num);  //加入购物车
          }
          if(n=='3'){
            this.$emit('ClChoiceClic',this.BtnId);
          }else{
            this.$emit('ClChoiceClic',n);
          }

        },
      }
    }
</script>

<style lang="less" scoped>
  @import "../../../styles/anstyle";
  .an-choice{
    .close-ico{
      position: absolute;
      right: 10px;
      top: 10px;
      fill: @color-text3;
    }
    .an-img-list{
      padding: 0 10px 10px 10px;
      display: flex;
      border-bottom: 1px solid @color-border3;
      .img{
        width: 120px;
        height: 120px;
        margin-right: 10px;
        overflow: hidden;
      }
      .text{
        .txt1{
          color: @color-Danger;
        }
        .money{
          font-size: 2em;
        }
        .kucun{
          color: @color-text3;
          margin-bottom: 10px;
        }
      }
    }
    .Choice{
      padding: 10px 0;
      height: 280px;
      overflow-y: auto;
      .shop-color{
        padding: 0 15px;
      }
      .til{
        color: @color-text1;
      }
      .list-box{
        width: 100%;
        padding: 10px 0 0 0;
        .demo1-item{
          font-size: 14px;
          display: inline-block;
          padding: 8px 15px;
          margin: 5px;
          color: @color-text3;
          border-radius: 5px;
          border:1px solid transparent;
          background-color: @color-border3;
          &.demo1-item-selected{
            color:@color-Danger ;
            border-color: @color-Danger;
            background-color: transparent;
          }
        }
      }
    }
    .footer{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: auto;
      .pad{
        padding: 5px 15px;
        width: 100%;
      }
      .btn-Sure{
        border-radius: 99px;
        color: #FFFFFF;
        border: none;
        background-color: @color-org;
      }
      .btn-left{
        border: none;
        border-top-left-radius: 99px;
        border-bottom-left-radius: 99px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        background-color: @color-yellow;
      }
      .btn-right{
        border: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 99px;
        border-bottom-right-radius: 99px;
        background-color: @color-org;
      }
    }
  }
</style>
